<template>
  <div class="CWBFX">
    <el-card class="box-card _body">
      <div slot="header">
        <span style="font-weight: 700; font-size: 20px">错误表分析</span>
      </div>
      <div class="query">
        机构

        <el-select
          v-model="query.orgCode"
          clearable
          filterable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in OrganList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        数据类型
        <el-select
          v-model="query.typeId"
          clearable
          filterable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in TypeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
        日期
        <el-date-picker
          clearable
          size="small"
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="time_change"
        >
        </el-date-picker>
        <el-button
          size="small"
          icon="el-icon-search"
          style="margin-left: 10px"
          type="primary"
          @click="getList"
        ></el-button>
        <!-- <el-button size="small" @click="goto" type="success">同步</el-button> -->
      </div>
      <div class="main">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 10px"
          stripe
          border
          height="600"
          v-loading="isLoading"
        >
          <el-table-column label="表描述" prop="tableDescription">
          </el-table-column>
          <el-table-column label="表名" prop="tableName"> </el-table-column>
          <el-table-column label="数据类型">
            <template>
              {{ set_type(query.typeId) }}
            </template>
          </el-table-column>
          <el-table-column prop="quantityAll" label="总数量"> </el-table-column>
          <el-table-column
            prop="quantityCorrect"
            label="成功量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="quantityError" label="错误量">
          </el-table-column>
          <el-table-column prop="name" label="选项" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="info(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 二层穿透 -->
    <el-dialog
      :title="title1"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-table
        ref="multipleTable"
        :data="listInfo"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        border
        height="550"
      >
        <el-table-column label="表名" prop="tableDescription">
        </el-table-column>
        <el-table-column label="表Code" prop="tableName"> </el-table-column>
        <el-table-column prop="count" label="累计总数"> </el-table-column>
        <!-- <el-table-column
          prop="quantityCorrect"
          label="累计成功数"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="quantityError" label="累计失败数">
        </el-table-column> -->
        <!-- <el-table-column prop="name" label="选项" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="info_err(scope.row)"
              >错误详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="page" style="text-align: right">
        <span style="float: left">总共 {{ total }} 条记录</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          @current-change="page_change"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 三层穿透 -->
    <el-dialog
      :title="title2"
      :visible.sync="dialogVisible2"
      width="55%"
      :before-close="handleClose2"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-table
        ref="multipleTable"
        :data="listErrInfo"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        border
        height="550"
      >
        <el-table-column label="字段名" prop="fieldName"> </el-table-column>
        <el-table-column label="字段描述" prop="fieldDescription">
        </el-table-column>
        <el-table-column prop="code" label="错误编码"> </el-table-column>
        <el-table-column prop="keyStr" label="数据标识"> </el-table-column>
        <el-table-column prop="msg" label="错误信息"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="change_type(scope.row.id)"
              type="success"
              >更改处理状态</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page" style="text-align: right">
        <span style="float: left">总共 {{ total2 }} 条记录</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize2"
          :current-page="currentPage2"
          :total="total2"
          @current-change="page_change2"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moreQuery: false,
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      query: {
        orgCode: "",
        typeId: "",
        startTime: "",
        endTime: "",
      },
      currentPage: 1,
      currentPage2: 1,
      pageSize: 15,
      pageSize2: 22,
      total: 0,
      total2: 0,
      TypeList: [],
      OrganList: [],
      dialogVisible: false,
      dialogVisible2: false,
      listInfo: [],
      listErrInfo: [],
      isLoading: false,
      tableName: "",
      title1: "",
      title2: "",
      fieldName: "",
    };
  },
  mounted() {
    this.getTypeList();
    this.getOrganList();
  },
  methods: {
    getTypeList() {
      this.$get(baseUrl.jbIp + "/T1/api/v1/Platform/Data/TypeList").then(
        (res) => {
          this.TypeList = res.data;
        }
      );
    },
    getOrganList() {
      this.$get(baseUrl.jbIp + "/T1/api/v1/Platform/Data/OrganList").then(
        (res) => {
          this.OrganList = res.data;
        }
      );
    },
    set_type(val) {
      var str = "";
      for (var i in this.TypeList) {
        if (this.TypeList[i].typeId == val) {
          str = this.TypeList[i].typeName;
        }
      }
      return str;
    },
    getList() {
      if (this.query.typeId == "") {
        this.$message.error("请选择数据类型！");
        return;
      }
      this.isLoading = true;
      var init = JSON.stringify(this.query);
      let body = JSON.parse(init);
      body.typeId = body.typeId ? body.typeId : "-1";
      this.$post(
        baseUrl.jbIp + "/T1/api/v1/Platform/Data/TableErrorDataList1",
        body
      ).then((res) => {
        if (res.code != 200) {
          this.$message.error(res.message);
          this.isLoading = false;
          return;
        }
        this.tableData = res.data;
        this.isLoading = false;
      });
    },
    time_change(val) {
      if (val == "" || val == [] || val == null) {
        this.query.startTime = "";
        this.query.endTime = "";
        this.getList();
        return;
      }
      this.query.startTime = val[0];
      this.query.endTime = val[1];
      this.getList();
    },
    info(val) {
      var tableName = val.tableName;
      this.tableName = tableName;
      this.title1 = val.orgName;
      this.getListInfo(tableName);
      // let dyOrgCode = val.dyOrgCode * 1;
      // this.dyOrgCode = dyOrgCode;
      // this.title1 = val.orgName;
      // this.getListInfo(dyOrgCode);
    },
    info_err(val) {
      this.title2 = val.tableDescription;
      var tableName = val.tableName;
      this.tableName = tableName;
      this.getListInfo1(tableName);
      this.fieldName = tableName;
    },
    getListInfo(dyOrgCode) {
      var filter = JSON.stringify(this.query);
      this.isLoading = true;
      var query2 = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        filter: JSON.parse(filter),
      };
      query2.filter.tableName = dyOrgCode;
      var init = JSON.stringify(query2);
      let body = JSON.parse(init);
      body.filter.typeId = body.filter.typeId ? body.filter.typeId : "-1";
      this.$post(
        baseUrl.jbIp + "/T1/api/v1/Platform/Data/TableErrorDataList2",
        body
      ).then((res) => {
        this.listInfo = res.data.list;
        this.total = res.data.total;
        this.dialogVisible = true;
        this.isLoading = false;
      });
    },
    getListInfo1(tableName) {
      var filter = JSON.stringify(this.query);
      var query2 = {
        currentPage: this.currentPage2,
        pageSize: this.pageSize2,
        filter: JSON.parse(filter),
      };
      query2.filter.orgCode = this.dyOrgCode;
      query2.filter.fieldName = tableName;
      this.$post(
        baseUrl.jbIp + "/T1/api/v1/Platform/Data/TableErrorDataList3",
        query2
      ).then((res) => {
        this.dialogVisible2 = true;
        this.listErrInfo = res.data.list;
        this.total2 = res.data.total;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.listInfo = [];
      this.currentPage = 1;
    },
    handleClose2() {
      this.dialogVisible2 = false;
      this.listErrInfo = [];
      this.currentPage2 = 1;
    },
    goto() {
      this.$router.push("/SystemManagement/SJCJ");
    },
    page_change(val) {
      this.currentPage = val;
      this.getListInfo(this.dyOrgCode);
    },
    page_change2(val) {
      this.currentPage2 = val;
      this.getListInfo1(this.tableName);
    },
    change_type(id) {
      this.$put(
        baseUrl.jbIp + "/T1/api/v1/Platform/Data/SetStatus?id=" + id
      ).then((res) => {
        if (res.code != 200) {
          this.$message.error(res.message);
          return;
        }
        this.getListInfo1(this.fieldName);
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
  },
};
</script>

<style scoped>
.CWBFX {
  padding: 10px;
}
._body {
  height: 90vh;
}
::v-deep .el-date-editor .el-range-separator {
  padding: 0;
}
</style>
